<template>
  <div
      style="justify-content: center;color: white;background-color: rgb(16, 25, 56);background-image:url('/src/assets/headerImg.png');background-size: 100% 90%;font-size: 26px;font-family: 宋体;">
    <span style="float: left;font-size: x-small">这里是小通知</span>
    <span style="float: right;font-size: x-small;margin-right: 20px">{{ this.date }}</span>
    <div style="text-align: center">智慧消防远程监管平台</div>
  </div>
    <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        router
    >
      <el-menu-item index="/home" style="color: #d2d2d2">监控首页</el-menu-item>
      <el-menu-item index="/equipment" style="color: #d2d2d2">设备监管</el-menu-item>
      <el-menu-item index="/number" style="color: #d2d2d2">分级与用户</el-menu-item>
      <el-menu-item index="/home" style="color: #d2d2d2">报警管理</el-menu-item>
      <el-menu-item index="/home" style="color: #d2d2d2">资费管理</el-menu-item>
      <el-menu-item index="/home" style="color: #d2d2d2">电力运维</el-menu-item>
      <el-menu-item index="/home" style="color: #d2d2d2">消防管理</el-menu-item>
      <el-menu-item index="/home" style="color: #d2d2d2">统计分析</el-menu-item>
    </el-menu>

</template>

<script>
import dayjs from "dayjs"

export default {
  data() {
    return {
      date: "2024-03-15 15:31:27",
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      const date = dayjs(new Date())
      this.date = date.format('YYYY-MM-DD HH:mm:ss');
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>


<style scoped>
.el-menu-demo {
  height: 40px;
  justify-content: center;
  background: rgb(16, 25, 56);
}

el-menu-item {

}
</style>
